<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <input type="text" value="手机">
</head>
<body>
  <script>
    //1.获取元素
    var text = document.querySelector('input');
    //2.注册事件 获得焦点事件 onfocus
    text.onfocus = function(){
      console.log('得到了焦点');
      if(this.value === '手机'){
        this.value = '';
      } 
      //获得焦点需要把文本框里面的文字颜色变黑
      this.style.color = '#333'
    }
    //3.注册事件  失去焦点事件  onblur
    text.onblur = function(){
      console.log('失去了焦点');
      if(this.value === ''){
        this.value = '手机';
      }
      //失去焦点需要把文本框里面的文字颜色变浅
      this.style.color = '#999'
    }
  </script>
</body>
</html>